<template>
  <div class="main">
    <div class="content">
      <div class="slogan">您还没有所属的餐馆</div>
      <div class="choose-box">
        <button class="choose-button" style="float: left" @click="createdRestaurantDialog = true">创建餐馆</button>
        <button class="choose-button" style="float: right" @click="joinRestaurantDialog = true">加入餐馆</button>
      </div>
    </div>
    <el-dialog title="创建餐厅" :visible.sync="createdRestaurantDialog" width="40%">
      <el-form ref="form" label-width="80px" style="width: 90%; margin: 0 auto">
        <el-form-item label="餐馆名称">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="餐馆描述">
          <el-input type="textarea" v-model="description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createdRestaurantDialog = false">取消</el-button>
        <el-button type="primary" @click="tryToCreate">创建</el-button>
      </span>
    </el-dialog>
    <el-dialog title="加入餐馆" :visible.sync="joinRestaurantDialog" width="40%">
      <el-form ref="form" label-width="80px" style="width: 90%; margin: 0 auto">
        <el-form-item label="搜索餐馆">
          <el-autocomplete v-model="name" :fetch-suggestions="queryRestaurant"
                           placeholder="请输入餐馆名" @select="handleSelect"></el-autocomplete>
        </el-form-item>
      </el-form>
      <div class="current">当前选中餐馆：{{ currentName }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="joinRestaurantDialog = false">取消</el-button>
        <el-button type="primary" @click="tryToJoin">加入</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import {createRestaurant, joinRestaurant, queryRestaurant} from "@/http/api/restaurant";
import cookie from "js-cookie";
import response from "@/http/response";

export default {
  name: "Common",
  data() {
    return {
      createdRestaurantDialog: false, // 是否显示创建餐馆对话框
      joinRestaurantDialog: false, // 是否显示加入餐馆对话框

      restaurantId: '', // 餐馆id
      name: '', // 餐馆名称
      description: '', // 餐馆描述

      currentName: '无', // 当前选中餐馆名称

    }
  },
  methods: {

    // 尝试创建餐馆
    async tryToCreate() {

      // 发起请求
      let result = await createRestaurant({
        userId: cookie.get('userId'),
        name: this.name,
        description: this.description
      })

      // 处理服务端返回结果
      switch (result.code) {

          // 请求成功
        case response.success:
          this.$message.success('创建成功，请重新登录')
          this.createdRestaurantDialog = false
          await this.$router.push('/restaurant/login')
          break

          // 服务器错误
        case response.serverErr:
          this.$message.error(result.message)
          break

          // 其他异常
        default:
          this.$message.warning(result.message)
      }
    },

    // 尝试加入餐馆
    async tryToJoin() {

      // 判断是否已选择餐馆
      if (typeof this.restaurantId !== 'number') {
        return this.$message.warning('请选择餐馆')
      }

      // 发起请求
      let result = await joinRestaurant({
        userId: cookie.get("userId"),
        restaurantId: this.restaurantId,
      })

      // 处理返回结果
      switch (result.code) {

          // 请求成功
        case response.success:
          this.$message.success('申请成功')
          this.joinRestaurantDialog = false
          break

          // 服务器错误
        case response.serverErr:
          this.$message.error(result.message)
          break

          // 其他异常
        default:
          this.$message.warning(result.message)
      }
    },

    // 查询餐馆
    async queryRestaurant(queryString, cb) {

      // 必须有值才能进行查询
      if (!queryString) {
        return
      }

      // 发起查询请求
      let results = await queryRestaurant({
        query: queryString
      })

      // 请求成功后加载列表
      if (results.code === response.success) {
        cb(results.data)
      }
    },

    // 选择餐馆
    handleSelect(item) {
      this.currentName = item.value
      this.restaurantId  = parseInt(item.idStr)
    },
  }
}
</script>

<style lang="less" scoped>
.main {
  background: url("../../assets/images/restaurant/common/background.jpg") no-repeat;
  background-size: 100%;

  .content {
    height: 737px;

    .slogan {
      font-size: 40px;
      color: #FFF;
      width: 360px;
      padding-top: 280px;
      margin: 0 auto;
    }

    .choose-box {
      padding-top: 40px;
      width: 300px;
      margin: 0 auto;

      .choose-button {
        width: 120px;
        height: 40px;
        border: none;
        border-radius: 20px;
        background-color: #F4CE58;
        cursor: pointer;
        font-size: 15px;
      }
    }
  }

  .current {
    width: 90%;
    margin: 0 auto;
    color: #AAA;
  }
}
</style>